<!-- 广场(活动)-发布活动 -->
<template>
	<view class="page">
		<view class="card">
			<view class="title">
				活动标题
			</view>
			<u-input height="120" :placeholder="placeholder0" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" v-model="submitQurey.activityName" type="textarea" />
			<view class="title">
				活动说明
			</view>
			<u-input height="120" :placeholder="placeholder1" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" v-model="submitQurey.activityExplanation" type="textarea" />
			<view class="title">
				活动地址
			</view>
			<u-input height="120" :placeholder="placeholder3" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" v-model="submitQurey.activityAddress" type="textarea" />
			<view class="title">
				人数上限
			</view>
			<u-input height="120" :placeholder="placeholder4" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" maxlength="2" v-model="submitQurey.activltyOnline" type="number" />
			<view class="title">
				报名费用
			</view>
			<u-input height="120" :placeholder="placeholder2" maxlength="3" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" v-model="submitQurey.activityPrice" type="number" />
			<view class="title">
				标签(最多可输入两项)
			</view>
			<u-input height="120" :placeholder="placeholder5" maxlength="6" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" v-model="tagName1" type="text" />
			<u-input height="120" :placeholder="placeholder5" maxlength="6" :clearable="false"
				placeholderStyle="font-weight: 400;color: #999999;font-size: 24rpx;" v-model="tagName2" type="text" />
			<view class="acti">
				<view class="title act">
					活动封面
				</view >
				<u-upload :custom-btn="true" class="upload" max-count="1" name="path" :header="header" :action="action" @on-remove="onRemove0" @on-Success="onSuccess0" width="190" height="190">
					<view slot="addBtn" class="upload-item flex justify-center align-center">
						<view class="icon flex justify-center align-center">
								<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/upload1.png" mode=""></image>
						</view>
						<view class="name">
							添加封面
						</view>
					</view>
				</u-upload>
			</view>
		
			<view class="picker">
				<view  class="pickeritem flex justify-between"> 开始日期
				<picker mode="date" :value="stdt" :start="start" @change="bindDateChange1">{{stdt}}</picker> - 
				<picker mode="time" :value="stdt0"  @change="bindTimeChange1">{{stdt0}}</picker>
				</view>
			</view>
			<view class="picker">
				<view  class="pickeritem flex justify-between"> 结束日期
				<picker mode="date" :start="end" @change="bindDateChange2">{{eddt}}</picker> - 
				<picker mode="time" :value="eddt0" :start="end0" @change="bindTimeChange2">{{eddt0}}</picker>
				</view>
			</view>
			<view class="img">
				<view class="title">选择图片</view>
				<u-upload  name="path" :header="header" max-count="6" :custom-btn="true" file-list="fileList" :action="action" @on-remove="onRemove1" @on-Success="onSuccess1" width="170" height="170"  >
					<view slot="addBtn" style="width: 170rpx;height: 170rpx;">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/tianjiaimgsss.png" mode=""></image>
					</view>
				</u-upload>
			</view>
		</view>
		
		<view class="btnon flex justify-between align-center flex-column">
			<!-- <view class="notice">
				为了您和其他用户的安全，需要段位达到钻石及以上才可发布此活动
			</view> -->
			<view class="btn flex justify-center align-center" @click="submit">
				发 布
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate1({
			           format: true
			       })
			return {
				placeholder0: '（必填）请在此处输入您发起投票的标题，最多不超过20个字',
				placeholder1: '（必填）请在此处输入您发起投票的补充说明，最多不超过100个字',
				placeholder2: '（必填）请在此处输入您发起活动的报名费用，最低0元',
				placeholder3: '（必填）请在此处输入您发起活动的地址',
				placeholder4: '（必填）请在此处输入您发起活动的活动人数上限',
				placeholder5: '（选填）请在此处输入您发起活动的标签',
				tagName1:'',
				tagName2:'',
				submitQurey:{
					activityName: '',
					activityExplanation: '',
					activityAddress: '',
					activltyOnline: '',
					activityPrice: '',
					activityTitleList: [],
					activityDetailList: [],
					startDate: 0,
					endDate: 0,
					activityImage:''
				},
				stdt:'选择开始日期',
				eddt:'选择结束日期',
				currenDate: currentDate,
				action: 'https://shanfu.51fnt.com/attentionList/uploadPicture',
				path: {
					path: 'path'
				},
				header: {
					'Content-Type': 'formData'
				},
				fileList: [],
				stdt0:'00:00',
				eddt0:'00:00',
			}
		},
		computed:{
			start() {
					return this.getDate('start');
				},
			end() {
					return this.getDate('end');
			},
			end0() {
					return this.getDate('end0');
			}
		},
		methods: {
			bindDateChange1(e) {
				this.stdt = e.target.value
			},
			bindDateChange2(e){
				this.eddt = e.target.value
			},
			bindTimeChange1(e){
				this.stdt0 = e.target.value
			},
			bindTimeChange2(e){
				this.eddt0 = e.target.value
			},
			getDate(type) {
				if (type === 'start') {
					const date = new Date(this.currenDate);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					let hour = date.getHours();
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				} else if (type === 'end') {
					const ndate = new Date(this.stdt);
					let nyear = ndate.getFullYear();
					let nmonth = ndate.getMonth() + 1;
					let nday = ndate.getDate();
					nmonth = nmonth > 9 ? nmonth : '0' + nmonth;
					nday = nday > 9 ? nday : '0' + nday;
					return `${nyear}-${nmonth}-${nday}`;
				}else if (type === 'end0') {
					const ndate = new Date(this.stdt0);
					let hour = ndate.getHours();
					let min = ndate.getMinutes();
					return `${hour}:${min}`;
				}
			},
			getDate1(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours();
				return `${year}-${month}-${day}`;
			},
			//图片上传回调
			onSuccess0(res, index, lists){
				if(res){	
					this.submitQurey.activityImage = res.data.picture[0].url
				}
			},
			//删除图片回调
			onRemove0(data, lists){		
				this.submitQurey.activityImage.splice(data,1)
			},
			//图片上传回调
			onSuccess1(res, index, lists){
				if(res.code == 200){
					this.fileList.push(res.data.picture[0].url);	
					this.submitQurey.activityDetailList = this.fileList
					console.log(this.submitQurey.activityDetailList)
				}
			},
			//删除图片回调
			onRemove1(data, lists){		
				this.submitQurey.activityDetailList.splice(data,1)
			},
			async submit(){
				if(this.stdt != '选择开始日期'){
					if(this.eddt != '选择结束日期'){
						this.submitQurey.startDate = this.stdt + ' ' + this.stdt0 + ':00'
						this.submitQurey.endDate = this.eddt + ' ' + this.eddt0 + ':00'
						if(this.tagName1 != ''){
							this.submitQurey.activityTitleList.push(this.tagName1)
						}
						if(this.tagName2 != ''){
							this.submitQurey.activityTitleList.push(this.tagName2)
						}
						console.log(this.submitQurey)
						if(this.submitQurey.activityPrice != ''&&this.submitQurey.startDate&&this.submitQurey.endDate&&this.submitQurey.activityName&&this.submitQurey.activityExplanation&&this.submitQurey.activityDetailList.length&&this.submitQurey.activltyOnline&&this.submitQurey.activityImage.length){
							this.submitQurey.activityPrice = this.submitQurey.activityPrice*1
							await this.$post('/activity/releaseActivity',this.submitQurey)
							await uni.setStorageSync('fresh',true)
							await uni.navigateBack({
								url: '/pages/square/square'
							})
						}else{
							this.showToast()
						}
					}else{
						uni.showToast({
							title: '请选择结束日期',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '请选择开始日期',
						icon: 'none'
					})
				}
			},
			showToast() {
				this.submitQurey.activityTitleList = []
				this.$refs.uToast.show({
					title: '填写完整信息',
					type: 'error',
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		background: #FFFFFF;
		min-height: 100vh;
		.card {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 45rpx 30rpx 200rpx;
			.acti{
				padding-bottom: 30rpx;
				.upload {
					width: 100%;
					.upload-item {
						width: 690rpx;
						height: 68rpx;
						border: 4rpx dashed #0265EB;
				
						.icon {
							width: 26rpx;
							height: 26rpx;
							margin-right: 20rpx;
						}
				
						.name {
							font-weight: 500;
							color: #0265EB;
							font-size: 28rpx;
						}
					}
				}
			}
			.title {
				font-weight: 500;
				color: #333333;
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}
			u-input{
				border-bottom: 1rpx solid #f5f5f5;
			}
			.act{
				margin-bottom: 40rpx;
			}
			.top{
				margin-top: 50rpx;
			}
			.img{
					margin-top: 40rpx;
				}
			.picker{
				height: 44rpx;
				color: #000000;
				font-size: 32rpx;
				.pickeritem{
					height: 60rpx;
					margin-top: 20rpx;
					picker{
						color: #999999;
					}
				}
			}
		}
		.btnon{
			position: fixed;
			bottom: 0;
			left: 30rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			background-color: #FFFFFF;
			z-index: 99;
			.notice{
				font-weight: 400;
				color: #999999;
				font-size: 20rpx;
			}
			.btn{
				margin-top: 16rpx;
				width: 690rpx;
				height: 84rpx;
				background: #0265EB;
				border-radius: 42rpx;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 32rpx;
				box-shadow: 0px 10px 10px rgba(12,108,240, .4);
			}
		}
	}
</style>
